bootstrap

2023-07-05 19:02| 来源: 网络整理| 查看: 265

网站：examples.bootstrap-table.com/index.html

引用bootstrap-table的js和css

复制代码

在script里面写：代码：

注解：文件的请求方式是使用ajax的方法请求的，网页布局使用bootstrap-table格式（class名字：table） ajax的请求：url、type、success（成功）

html：复制代码

script代码：

$(function (){ load(); //查询(页面载入) // 删除事件: $(".table").on("click",".glyphicon-remove",function(){ // parent() 寻找父元素 attr("") 属性 var id=$(this).parent().attr("data-id"); console.log(id); $.ajax({ url:"http://localhost:3000/content", type:"DELETE", data:{_id:id}, success:function(res){ if(res.status===200){ console.log("删除成功") load(); } } }) }) function load() { $.ajax({ url: "http://localhost:3000/content", type: "GET", success: function (res) { if (res.status === 200) { $(".table").bootstrapTable('destroy').bootstrapTable({ data: res.data, // url："" , 数据源 pagination:true, //启用分页 pageSize:5, //分页大小 // pageList:[1,2,3], //自定义分页 showToggle:true, //试图 showPaginationSwitch:true, //分页开关 showFullscreen:true, //全屏 showRefresh:true, //刷新（仅支持url数据源） search:true, //启用查询 showSearchButton:true, //查询按钮（和search一起使用） showPrint:true, //打印 showExport:true, //导出(pdf) // columns 列 columns: [{ field: '_id', title: '编号' }, { field: 'title', title: '标题' }, { field: 'content', title: '内容' }, { field: 'top', title: '是否置顶', formatter:function(value,data){ // value 当前列的值 // data 当前行的数据 console.log(value,data) return value ?"是":"否"; } },{ title:"操作", formatter:function(value,data){ return` ` } } ], // 添加删除 // buttons:自定义按钮的集合 buttons: function () { return { btnAdd: { icon: 'glyphicon glyphicon-plus', event: function () { alert('添加') }, attributes: { title: "add" } }, btnDel: { icon: 'glyphicon glyphicon-remove', event: function () { alert('删除') }, attributes: { title: "remove" } } } } }) } } }) } }) 复制代码

// url："" , // 数据源 pagination:true, //启用分页 pageSize:5, //分页大小 // pageList:[1,2,3], //自定义分页 showToggle:true, //试图 showPaginationSwitch:true, //分页开关 showFullscreen:true, //全屏 showRefresh:true, //刷新（仅支持url数据源）

====================================

search:true, //启用查询 showSearchButton:true, //查询按钮（和search一起使用）

===================================

showPrint:true, //打印需要引用最新版的css和js

复制代码

==================================

showExport:true, //导出(pdf)

引用需要多个script的外部插件：如图（按照循序）：

\ \ \ \ \ \ 复制代码

自定义按钮集合

buttons: function () { return { btnAdd: { icon: 'glyphicon glyphicon-plus', event: function () { alert('添加') }, attributes: { title: "add" } }, btnDel: { icon: 'glyphicon glyphicon-remove', event: function () { alert('删除') }, attributes: { title: "remove" } } } } }) 复制代码

formatter 改变格式：

formatter:function(value,data){ // value 当前列的值 // data 当前行的数据 console.log(value,data) return value ?"是":"否"; } 复制代码

语句格式 return 属性值 ? "true结果":"false结果"

//================================================== 删除标签的删除功能实现：

title:"操作", formatter:function(value,data){ return` ` } } 复制代码

给新的“操作”列中的第二个删除标签样式添加ajax的点击事件：

// 删除事件: $(".table").on("click",".glyphicon-remove",function(){ // parent() 寻找父元素 attr("") 属性 var id=$(this).parent().attr("data-id"); console.log(id); $.ajax({ url:"http://localhost:3000/content", type:"DELETE", data:{_id:id}, success:function(res){ if(res.status===200){ console.log("删除成功") load(); } } }) }) 复制代码

【本文地址】

公司简介

联系我们